<!--
  author: tangcheng_cd
  create by: 2018/5/30
  descr: 用户新增修改面板
-->
<template>
  <el-dialog
    :title="dialogMode === 'ADD' ? '新增' : '编辑'"
    :visible.sync="dialogVisiable"
    v-model="dialogMode"
    @close="ardCancelBtnClick"
    class="user-add-modify-dialog"
    width="822px">
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      :label-position="'right'">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="所属机构" prop="orgName">
            <el-input v-model="formData.orgName"
                      disabled
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首登录修改密码" prop="tchange">
            <el-switch v-model="formData.tchange"
                       :disabled="dialogMode === 'ADD' ? false : true"
                       active-value="Y"
                       inactive-value="N">
            </el-switch>
            <span class="ml5">{{formData.tchange === 'Y' ? '是' : '否'}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="账号" prop="code">
            <el-input v-model="formData.code"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="formData.mobile"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="tel">
            <el-input v-model="formData.tel"
                      placeholder="请在此输入(选填)">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="账号级别" prop="lvl">
            <el-select v-model="formData.lvl" placeholder="请选择" popper-class="zIndex-popper">
              <el-option
                v-for="item in accountLayer"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <!-- 密码应该是不能查询出来的 -->
          <!--<el-form-item label="密码" prop="password">
            <el-input v-model="formData.password"
                      type="password"
                      placeholder="请在此输入">
            </el-input>
          </el-form-item>-->
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码过期日" prop="failTime">
            <el-date-picker v-model="formData.failTime"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="timestamp"
                            popper-class="zIndex-popper"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')" class="dialog-btn">重置</el-button>
      <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
      <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import ajax from '../../../api/ajax/ajax'
import api from '../../../api/url'

export default {
  name: 'user-add-modify',
  data () {
    let codeValidator = (rule, value, callback) => {
      if (value === 'null') callback(new Error('null不能作为账户存在'))
      callback()
    }
    return {
      dialogVisiable: false, // 新增对话框显示控制
      dialogMode: { // 对话框色对话框模式  ADD新增 MODIFY 修改
        type: String,
        default: 'ADD'
      }, // 对话框模式
      currentItem: {
        tchange: '', // 默认首次登录是否修改密码
        name: '',
        password: ''
      }, // 表单初始化数据
      formData: {}, // 新增对话框表单数据
      formRules: {
        code: [ // 账号
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' },
          { validator: codeValidator }
        ],
        name: [ // 姓名
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        tel: [ // 电话号码
        ],
        password: [ // 密码
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
        ],
        lvl: [ // 账号等级
        ]
      }, // 新增对话框表单项规则
      accountLayer: [ // 账户级别
        {
          label: '一级',
          value: '1'
        }, {
          label: '二级',
          value: '2'
        }, {
          label: '三级',
          value: '3'
        }
      ]
    }
  },
  methods: {
    // 新增显示对话框
    addShow (currOrgNode) {
      // 显示新增对话框
      this.dialogVisiable = true
      // 新增对话框模式
      this.dialogMode = 'ADD'

      // 表单数据初始化
      this.currentItem = {}
      this.currentItem.orgName = currOrgNode.name
      this.currentItem.orgId = currOrgNode.id
      this.formData = {...this.currentItem}
    },
    // 编辑显示对话框
    editShow (currOrgNode, selUserNode) {
      // 显示编辑对话框
      this.dialogVisiable = true
      // 新增对话框模式
      this.dialogMode = 'MODIFY'

      // 表单数据初始化
      this.currentItem = selUserNode
      this.currentItem.orgName = currOrgNode.name
      this.currentItem.orgId = currOrgNode.id
      this.formData = {...this.currentItem}
    },
    // 取消操作
    ardCancelBtnClick () {
      this.dialogVisiable = false
      // 清空数据
      this.formData = {}
      // 清除验证
      this.$refs.form.clearValidate()
    },
    // 重置表单
    resetForm (formName) {
      this.formData = {...this.currentItem}
      // 清除验证
      this.$refs.form.clearValidate()
    },
    // 预处理表单数据
    preHandFormData (formData) {
      formData.LOGINRANGE = 0
      return formData
    },
    // 新增
    add (postData, callback) {
      ajax.post(api.ADD_SYS_USER, postData).then(res => {
        callback && callback()
      })
    },
    // 修改
    update (postData, callback) {
      ajax.post(api.MODIFY_SYS_USER, postData).then(res => {
        callback && callback()
      })
    },
    // 提交新增数据
    submitFormData () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let postData = this.preHandFormData(this.formData)
          let callback = () => {
            // 隐藏新增对话框
            this.dialogVisiable = false
            // 数据清空
            setTimeout(() => {
              this.resetForm('form')
            }, 200)
            this.$emit('submitAfter', this)
          }
          if (this.dialogMode === 'ADD') {
            this.add(postData, callback)
          } else {
            this.update(postData, callback)
          }
        } else {
          return false
        }
      })
    }
  },
  created () {
    // 默认表单数据初始化
    this.formData = JSON.parse(JSON.stringify(this.currentItem))
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .user-add-modify-dialog
    .el-form
      .el-date-editor
        width 260px !important
      .el-select
        width 100%
        height 40px
</style>
